<template>
    <el-container>
        <el-header style="padding: 0;">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                background-color="#545c64" @select="handleSelect">
                <el-menu-item index="0" @click="goToHome">
                    <img style="width: 100px" alt="logo" src="../assets/imgs/"/>
                </el-menu-item>
                <el-menu-item index="1" @click="goToMain">尝试搜索</el-menu-item>
                <el-menu-item index="2">用户中心</el-menu-item>
            </el-menu>
        </el-header>
        <el-container
            style="padding-top: 30px;padding-left: 20%;padding-right: 20%;display: flex;flex-direction: column;">
            <el-card style="width: 100%;">
                <el-container style="width: 100%;padding-left: 10px;">
                    <el-avatar :size="80" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    <div style="flex:1;display: flex;flex-direction: column;margin:auto;margin-left: 30px;">
                        <span style="font-size: 20px;">{{ this.userInfo.username }}</span>
                        <span>
                            <template v-if="this.userInfo.vip === 1">
                                    VIP用户
                                </template>
                                <template v-else>
                                    非VIP用户
                                </template>
                        </span>
                    </div>
                    <div style="margin:auto;margin-right: 30px;">搜索总量：{{ this.userInfo.searchNum }}</div>
                </el-container>
            </el-card>
            <el-container style="margin-top: 10px;border-radius: 10px;height: 500px;">
                <el-aside width="150px" style="height: 100%; " background-color="#545c64">
                    <el-menu background-color="#545c64" class="el-menu-vertical-demo" default-active="1"
                        @select="handleMenuSelect" text-color="#fff" style="height: 100%; ">
                        <el-menu-item index="1">
                            <span>个人信息</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <span>修改密码</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <span>购买vip</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main style="width: 100%;padding: 0;padding-left: 20px;">
                    <div style="background-color: #545454;height: 100%;">
                        <el-descriptions title="用户信息" direction="vertical" border style="padding: 15px;"
                            v-show="selectId == 1">
                            <el-descriptions-item :rowspan="2" :width="140" label="用户头像" align="center">
                                <el-image style="width: 100px; height: 100px"
                                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                            </el-descriptions-item>
                            <el-descriptions-item label="用户名">{{ this.userInfo.username }}</el-descriptions-item>
                            <el-descriptions-item label="用户身份">普通用户</el-descriptions-item>
                            <el-descriptions-item label="VIP">
                                <template v-if="this.userInfo.vip === 1">
                                    VIP用户
                                </template>
                                <template v-else>
                                    非VIP用户
                                </template>
                            </el-descriptions-item>
                            <el-descriptions-item label="搜索总量">
                                <el-tag size="small">{{ this.userInfo.searchNum }}
                                </el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="电子邮件">
                                {{ this.userInfo.email }}
                            </el-descriptions-item>
                        </el-descriptions>
                        <div v-show="selectId == 2" style="padding: 20px">
                            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon
                                :rules="rules" label-width="auto" class="demo-ruleForm">
                                <el-form-item label="旧密码" prop="oldpass">
                                    <el-input v-model="ruleForm.oldpass" type="password" autocomplete="off" />
                                </el-form-item>
                                <el-form-item label="新密码" prop="newpass">
                                    <el-input v-model="ruleForm.newpass" type="password" autocomplete="off" />
                                </el-form-item>
                                <div style="color: #000;">{{this.changePasswordLabel}}</div>
                                <el-form-item>
                                    <el-button type="primary" @click="getChangePassword">
                                        提交
                                    </el-button>
                                    <el-button type="danger" @click="resetForm">清除</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div v-show="selectId == 3" style="padding: 20px;display: flex">  
                            <img src="../assets/IMG_2257.JPG" style="height: 450px;margin: auto;">

                        </img>
                        </div>
                    </div>

                </el-main>

            </el-container>
        </el-container>
    </el-container>
</template>

<script>
import axios, { AxiosError } from 'axios'
import router from "@/router";
export default {
    name: 'Info',
    data() {
        return {
            selectId: 1,
            ruleForm:{
                oldpass:"",
                newpass:"",
            },
            userInfo:{
                userId : '',
                username:'',
                password:'',
                email:'',
                role:'',
                vip:'',
                searchNum:''
            },
            changePasswordLabel:'',
            userId : localStorage.getItem("userId")
        }
    },
    mounted(){
        this.getUserInfo()
    },
    methods: {
        goToMain() {
            this.$router.push({ name: 'Main' })
        },
        goToInfo() {
            this.$router.push({ name: 'Info' })
        },
        goToHome() {
            this.$router.push({ name: 'Home' })
        },
        handleMenuSelect(index) {
            this.selectId = index;
        },
        resetForm(){
            this.ruleForm.newpass="";
            this.ruleForm.oldpass="";
        },
        //使用结构赋值进行异常处理
        promise_error_process(promise){
            return promise.then(data=>[null,data])
                            .catch(err=>[err,null])
        },
        async getUserInfoAjax(){
            const response = await axios({
					url				: `http://localhost:8090/api/users`,
					method			: 'GET',
					withCredentials : true,
                    params 			: {
						userId :this.userId
					}
				})
				return response
        },
        async getUserInfo(){
            const [err,result] = await this.promise_error_process(this.getUserInfoAjax())
            if(result){
                this.userInfo = result.data.data
                console.log(this.userInfo)
            }else{
                console.log(err)
            }
        },
        async getChangePasswordAjax(){
            const response = await axios({
					url				: `http://localhost:8090/api/users/password`,
					method			: 'PUT',
					withCredentials : true,
                    params 			: {
						userId      : this.userId,
                        oldPassword : this.ruleForm.oldpass,
                        newPassword : this.ruleForm.newpass
					}
				})
				return response
        },
        async getChangePassword(){
            const [err,result] = await this.promise_error_process(this.getChangePasswordAjax())
            if(result){
                console.log(result)
                if(result.data.code == 0)
                    this.changePasswordLabel = result.data.data
                else
                this.changePasswordLabel = result.data.message
            }else{
                this.changePasswordLabel = '修改失败!'
                console.log(err)
            }
        }
    }
}
</script>

<style scoped>
.home {
    text-align: center;
    margin-top: 50px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.el-menu--horizontal>.el-menu-item:nth-child(1) {
    margin-right: auto;
}
</style>